<template>
	<view class="forum_page">
		<view class="forum_head">
			<view class="status_bar"></view>
			<view class="forum_search">
				<view class="forum_search__box">
					<u-icon name="search" size="40" color="#666666"></u-icon>
					<input type="text" placeholder="搜索你喜欢的电影或电视剧..." class="forum_search__input"/>
				</view>
				<u-icon name="star-fill" size="46" color="#666666" @click="jumpTo('/pages/movie/myFavorite/myFavorite')"></u-icon>
			</view>
			<scroll-view class="scroll-view_H forum_type__box" scroll-x="true">
				<view class="forum_type__item" :class="{'forum_type__item___a': searchForm.category_id === item.id}"
					v-for="item in categoryList" @click="onSelect('category_id', item.id)">
					<text class="font-normal">{{ item.name }}</text>
					<view class="forum_type__a" v-if="searchForm.category_id === item.id"></view>
				</view>
			</scroll-view>
		</view>
		<view class="forum_content">
			<scroll-view scroll-y="true" class="forum_content__scroll">
				<view class="forum_video" v-for="item in videoList" @click="goTodetail(item)">
					<image :src="item.avatar" mode="aspectFill" class="forum_img"></image>
				</view>
				<u-empty mode="list" v-if="videoList.length === 0"></u-empty>
			</scroll-view>
		</view>
		<view class="forum_tabbar">
			<v-tabbar></v-tabbar>
		</view>
	</view>
</template>

<script>
	import {VideoList, Categories} from '@/common/api.js'

	export default {
		data() {
			return {
				categoryList: [],
				searchForm: {
					category_id: '',
				},
				current_page: 1,
				total_page: 0,
				pull_loading: false,
				loading: false,
				videoList: [],
				status: 'loadmore'
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
			jumpTo(url) {
				uni.navigateTo({ url })
			},
			goTodetail(item) {
				uni.navigateTo({
					url: `/pages/player?id=${item.id}`
				})
			},
			getCategory() {
				Categories().then(({data}) => {
					this.categoryList = data[0].children
					this.searchForm.category_id = this.categoryList[0].id
					this.getList()
				})
			},
			onSelect(type, key) {
				this.searchForm[type] = key
				this.current_page = 1
				this.total_page = 0
				this.videoList = []
				this.getList()
			},
			getList() {
				this.status = 'loading'
				this.loading = true
				this.searchForm.page = this.current_page
				VideoList(this.searchForm).then(res => {
					this.pull_loading = false
					this.loading = false
					this.total_page = res.data.total_page
					this.current_page = res.data.current_page
					if (res.data.current_page === 1) {
						this.videoList = res.data.list
					} else {
						this.videoList = this.videoList.concat(res.data.list)
					}
					if (this.current_page >= this.total_page) {
						this.status = 'nomore'
					}
				}).catch(error => {
					this.pull_loading = false
					this.loading = false
					console.log(error)
				})
			},
			loadMore() {
				if (this.loading) return
				this.current_page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("forum.scss");
</style>
